import React, { Component } from 'react'
import { useNavigate, useLocation } from "react-router-dom";

import "./header.scss"
class Index extends Component {
  state = {
    className: "menuBtn",
    className2: "nav",
    className3: "",
    current: 0
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    switch (this.props.location.pathname) {
      case "/":
        this.setState({
          current: 0
        })
        break;
      default:
        break;
    }
  }

  handleScroll = (e) => {
    if (window.scrollY > 70) {
      this.setState({ className3: "headerFix" })
    } else {
      this.setState({ className3: "" })
    }
  }
  cutClass = () => {
    if (this.state.className === "menuBtn") {
      this.setState({ className: "menuBtn open", className2: "nav navv", })
    } else {
      this.setState({ className: "menuBtn", className2: "nav" })
    }
  }
  render() {
    const { className, className2, className3, current } = this.state;
    return (
      <header>
        <div className={'header ' + className3}>
          <div className="con wrap">
            <div className="logo">
              <div className="img">
                <img src={require("../../static/images/logo3.png")} alt="logo"></img>
              </div>
              <div className="text">
                <div className="txt1">
                  鲲程科技
                </div>
                <div className="txt2">
                  Kun  Cheng  Technology
                </div>
              </div>
            </div>
            <div className="nav">
              <div className={current == 0 ? "li lii" : "li"}>
                <div className="v1">
                  <span>
                    首页
                  </span>
                </div>
              </div>
              <div className="li">
                <div className="v1">
                  <span>
                    关于我们
                  </span>
                  <img src={require("../../static/images/icon001.png")} alt=""></img>
                </div>
                <div className="sub box1">
                  <a href="#">
                    <img src={require("../../static/images/icon022.png")} alt=""></img>
                    <span>
                      鲲程简介
                    </span>
                  </a>
                  <a href="#">
                    <img src={require("../../static/images/icon022.png")} alt=""></img>
                    <span>
                      鲲程架构
                    </span>
                  </a>
                  <a href="#">
                    <img src={require("../../static/images/icon022.png")} alt=""></img>
                    <span className='ellipsis'>
                      鲲程荣誉与资质
                    </span>
                  </a>
                  <a href="#">
                    <img src={require("../../static/images/icon022.png")} alt=""></img>
                    <span className='ellipsis'>
                      战略合作
                    </span>
                  </a>
                  <a href="#">
                    <img src={require("../../static/images/icon022.png")} alt=""></img>
                    <span className='ellipsis'>
                      核心竞争力
                    </span>
                  </a>
                  <a href="#">
                    <img src={require("../../static/images/icon022.png")} alt=""></img>
                    <span className='ellipsis'>
                      可持续发展
                    </span>
                  </a>
                  <a href="#">
                    <img src={require("../../static/images/icon022.png")} alt=""></img>
                    <span className='ellipsis'>
                      投资者关系
                    </span>
                  </a>
                </div>
              </div>
              <div className="li">
                <div className="v1">
                  <span>
                    产品与解决方案
                  </span>
                  <img src={require("../../static/images/icon001.png")} alt=""></img>
                </div>
                <div className="sub box2">
                  <div className="c1">
                    <div className="left">
                      <img src={require("../../static/images/icon023.png")} alt=""></img>
                      <span>
                        经典案例
                      </span>
                    </div>
                    <div className="right">
                      <img src={require("../../static/images/icon024.png")} alt="" />
                    </div>
                  </div>
                  <div className="c2">
                    <div className="left">
                      <img src={require("../../static/images/icon026.png")} alt=""></img>
                      <span>
                        产品大类
                      </span>
                    </div>
                    <div className="right">
                      <a href="#">
                        产品A
                      </a>
                      <a href="#">
                        产品B
                      </a>
                      <a href="#">
                        产品C
                      </a>
                      <a href="#">
                        产品D
                      </a>
                      <a href="#">
                        产品E
                      </a>
                      <a href="#">
                        产品F
                      </a>
                    </div>
                  </div>
                  <div className="c2">
                    <div className="left">
                      <img src={require("../../static/images/icon027.png")} alt=""></img>
                      <span>
                        解决方案
                      </span>
                    </div>
                    <div className="right">
                      <a href="#">
                        方案A
                      </a>
                      <a href="#">
                        产品B
                      </a>
                      <a href="#">
                        产品C
                      </a>
                      <a href="#">
                        产品D
                      </a>
                      <a href="#">
                        产品E
                      </a>
                      <a href="#">
                        产品F
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div className="li">
                <div className="v1">
                  <span>
                    新闻资讯
                  </span>
                  <img src={require("../../static/images/icon001.png")} alt=""></img>
                </div>
                <div className="box3 sub">
                  <a href="#">
                    <img src={require("../../static/images/icon025.png")} alt=""></img>
                    <span>
                      企业动态
                    </span>
                  </a>
                  <a href="">
                    <img src={require("../../static/images/icon028.png")} alt=""></img>
                    <span>
                      行业动态
                    </span>
                  </a>
                </div>
              </div>
              <div className="li">
                <div className="v1">
                  <span>
                    加入鲲程
                  </span>
                  <img src={require("../../static/images/icon001.png")} alt=""></img>
                </div>
                <div className="sub box4">
                  <a href="#">
                    <img src={require("../../static/images/icon029.png")} alt=""></img>
                    <div className='text'>
                      <div className="tit">
                        鲲程文化
                      </div>
                      <div className="txt">
                        厚德载物的品格
                      </div>
                    </div>
                  </a>
                  <a href="#">
                    <img src={require("../../static/images/icon030.png")} alt=""></img>
                    <div className='text'>
                      <div className="tit">
                        鲲程人才
                      </div>
                      <div className="txt">
                        万里挑一的能力
                      </div>
                    </div>
                  </a>
                  <a href="#">
                    <img src={require("../../static/images/icon031.png")} alt=""></img>
                    <div className='text'>
                      <div className="tit">
                        培养发展
                      </div>
                      <div className="txt">
                        不断钻研的精神
                      </div>
                    </div>
                  </a>
                  <a href="#">
                    <img src={require("../../static/images/icon032.png")} alt=""></img>
                    <div className='text'>
                      <div className="tit">
                        招贤纳士
                      </div>
                      <div className="txt">
                        独一无二的眼光
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div className="li">
                <div className="v1">
                  <span>
                    下载中心
                  </span>
                  <img src={require("../../static/images/icon001.png")} alt=""></img>
                </div>
                <div className="sub box3 box3-w">
                  <a href="#">
                    <img src={require("../../static/images/icon033.png")} alt=""></img>
                    <span className='ellipsis'>
                      终端使用程序
                    </span>
                  </a>
                  <a href="#">
                    <img src={require("../../static/images/icon034.png")} alt=""></img>
                    <span className='ellipsis'>
                      产品使用说明
                    </span>
                  </a>
                </div>
              </div>
              <div className="li">
                <div className="v1">
                  <span>
                    联系我们
                  </span>
                  <img src={require("../../static/images/icon001.png")} alt=""></img>
                </div>
                <div className="sub box3">
                  <a href="#">
                    <img src={require("../../static/images/icon035.png")} alt=""></img>
                    <span>
                      公司信息
                    </span>
                  </a>
                  <a href="#">
                    <img src={require("../../static/images/icon036.png")} alt=""></img>
                    <span>
                      客户反馈
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={'header-iphone ' + className3}>
          <div className='con wrap'>
            <div className={className} onClick={this.cutClass}>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div className="logo">
              <img src={require("../../static/images/logo3.png")} alt="logo"></img>
            </div>
            <div className='right'>

            </div>
          </div>
          <div className={className2}>
            <div className="list">
              <div className="li">
                <div className="icon">
                  <img src={require("../../static/images/icon015.png")} alt="" />
                </div>
                <div className="txt">
                  首页
                </div>
              </div>
              <div className="li">
                <div className="icon">
                  <img src={require("../../static/images/icon016.png")} alt="" />
                </div>
                <div className="txt">
                  关于我们
                </div>
              </div>
              <div className="li">
                <div className="icon">
                  <img src={require("../../static/images/icon017.png")} alt="" />
                </div>
                <div className="txt">
                  产品与解决方案
                </div>
              </div>
              <div className="li">
                <div className="icon">
                  <img src={require("../../static/images/icon018.png")} alt="" />
                </div>
                <div className="txt">
                  新闻资讯
                </div>
              </div>
              <div className="li">
                <div className="icon">
                  <img src={require("../../static/images/icon019.png")} alt="" />
                </div>
                <div className="txt">
                  加入鲲程
                </div>
              </div>
              <div className="li">
                <div className="icon">
                  <img src={require("../../static/images/icon020.png")} alt="" />
                </div>
                <div className="txt">
                  下载中心
                </div>
              </div>
              <div className="li">
                <div className="icon">
                  <img src={require("../../static/images/icon021.png")} alt="" />
                </div>
                <div className="txt">
                  联系我们
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
    )
  }
}

export default function Header() {
  const navigation = useNavigate();
  const location = useLocation();
  return <Index navigation={navigation} location={location} />;
}